<template>
    <div>

      <a-card style="width: 100%;margin-bottom: 10px;">
        <a-form-model :layout="form.layout" :model="form" >
          <a-form-model-item label="角色名称">
            <a-input v-model="form.queryParam.menuName" placeholder="" />
          </a-form-model-item>

          <a-form-model-item label="状态">
            <a-select default-value="" style="width: 120px" v-model="form.queryParam.status" >
              <a-select-option value="">
                全部
              </a-select-option>
              <a-select-option value="1">
                正常
              </a-select-option>
              <a-select-option value="2">
                停用
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item >
            <a-button type="primary" icon="search" @click="getPage">
              查询
            </a-button>
          </a-form-model-item>

        </a-form-model>
      </a-card>



      <a-table
        :columns="table.columns"
        :data-source="table.data"
        :pagination="pagination"
        :scroll="{ y: 320 }"
        :loading="table.loading"
        rowKey="id"
      >
        <template slot="operation" slot-scope="text, record">

          <a href="javascript:;" @click="edit(record.id)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            v-if="table.data.length"
            title="您确定要删除?"
            @confirm="() => onDelete(record,text)"
          >
            <a href="javascript:;">删除</a>
          </a-popconfirm>

        </template>

        <template slot="iconCell" slot-scope="text, record">
          <svg-icon :icon-class="record.icon" />
        </template>

      </a-table>
    </div>
</template>

<script>

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      width: '8%',
    },
    {
      title: '名称',
      dataIndex: 'name',
      width: '13%',
    },
    {
      title: '权限字符串',
      dataIndex: 'roleKey',
      width: '8%',
    },
    {
      title: '角色状态',
      dataIndex: 'status',
      width: '20%',
    },

  ];


  export default {
    name: "list",
    data(){
      return {
        table:{
          columns:columns,
          data:undefined,
          loading: false,
        },
        pagination:{
          defaultCurrent: 1,    //默认当前页码
          defaultPageSize: 10,  //默认每页行数
          current:1,  //当前页数
          total:0,    //总行数
          pageSize: 10 ,
          showQuickJumper:true,
          pageSizeOptions:['5','10','15','20'],
          showSizeChanger:true,

        },

      }
    },
    methods: {
      onDelete(record,text){

      },
      edit(id){

      }
    }
  }
</script>

<style scoped>

</style>
